<template>
    <div class="cover">
        <l-map class="my-map" v-bind="mapBasicInfo" @ready="onLMapReady" @click="handleClickLMap">
            <l-image-overlay :url="mapBasicInfo.url" :bounds="mapBasicInfo.maxBounds" :no-wrap="true"></l-image-overlay>
            <template v-if="true">
                <l-marker v-for="(marker, index) in markers" :key="marker.name + index" :lat-lng="marker.LatLng"
                    :icon="marker.icon" @click="handleClickMarker(marker, $event)">
                    <l-tooltip :options="marker.tooltip">
                        {{ marker.name }}
                    </l-tooltip>
                </l-marker>
            </template>
            <template v-if="true" v-for="polyline in polylines">
                <l-marker :lat-lng="polyline.latLngs.at(0)" :icon="icons.qidian"></l-marker>
                <l-marker :lat-lng="polyline.latLngs.at(-1)" :icon="icons.zhongdian"></l-marker>
                <l-marker v-for="(item, index) in polyline.latLngs.slice(1, -1)" :key="index" :lat-lng="item"
                    :icon="icons.jianzhu"></l-marker>
                <l-polyline ref="LPolyLine" v-bind="polyline" :weight="4"></l-polyline>
            </template>
        </l-map>
        <el-button type="primary"></el-button>
    </div>
</template>

<script>
import L from 'leaflet';
import { LMap, LMarker, LImageOverlay, LIcon, LPolyline, LTooltip } from 'vue2-leaflet';
import { mapBasicInfo, markers, polylines, icons } from './mapOptions'
export default {
    components: { LMap, LMarker, LImageOverlay, LIcon, LPolyline, LTooltip },
    data() {
        return {
            mapBasicInfo: mapBasicInfo, // 手绘地图基础信息
            markers,   // 手绘地图markers信息
            polylines, // 手绘地图polylines信息
            icons,     // 手绘地图icons信息
            LMap: null, // 整个地图的实例
            vm: this
        }
    },
    created() { },
    mounted() {
        setTimeout(() => {
            console.log(this.$refs.LPolyLine, 'LPolyLine');
        }, 2000)
    },
    methods: {
        onLMapReady(mapObject) {
            this.LMap = mapObject
        },
        handleClickLMap(e) {
            const { latlng } = e
            console.log(latlng, '经纬度坐标');
            console.log(Object.values(latlng), '值');
            this.markerLatLng = e.latlng
        },
        handleClickMarker(item, e) {
            console.log(item, 'marker的值');
            console.log(e, 'marker的点击事件');
            this.zoomToMarker(item.LatLng, 15)
        },
        zoomToMarker(latLng, zoom, options = { duration: 0.8 }) {
            this.LMap.flyTo(latLng, zoom, options);
            this.LMap.once('moveend', function () {
                console.log('// 动画结束后的操作');
            });
        },
    }
};
</script>

<style scoped lang="less">
.cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // overflow: hidden;

    .map {
        width: 100%;
        height: 100%;
    }
}

::v-deep {
    .l-map-marker-tooltip {
        border: 0;
        color: #fff;
        font-family: "Source Han Sans SC Medium";
        font-weight: 500;
        font-size: 14px;
        opacity: 0.7;

        &::before {
            display: none;
        }
    }

    .gongjiao {
        background: #df00c5;
    }

    .chongdianzhuang {
        background: #00bf1e;

    }

    .tingchechang {
        background: #fd4f03;
    }
}
</style>
